<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TTL播放器</title>
    <style>
      .playing {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <input
        type="text"
        @keyup.enter="searchMusic"
        v-model="query"
        placeholder="Search..."
      />
      <div>
        <li v-for="song in songs">
          <button @click="playMusic(song.id)">music</button>
          <b>{{ song.name }}</b>
          <button @click="playMv(song.mvid)" v-if="song.mvid!=0">mv</button>
        </li>
      </div>
      <div>
        <img :src="musicCover" :class="{playing:isPlaying}" />
      </div>
      <div>
        <audio
          ref="audio"
          :src="musicSrc"
          controls
          loop
          autoplay
          @play="play"
          @pause="pause"
        ></audio>
      </div>
      <div>
        <p v-for="item in comments">
          <strong>{{ item.user.nickname}}</strong>: {{item.content }}
        </p>
      </div>
      <div v-show="isShowing" style="display: none;">
        <video :src="mvUrl" controls></video>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          query: "",
          songs: [],
          musicSrc: "",
          musicCover: "",
          comments: [],
          isPlaying: false,
          // 遮罩层显示状态
          isShowing: false,
          mvUrl: "",
        },
        methods: {
          searchMusic: function () {
            var that = this;
            url = "https://autumnfish.cn/search";
            axios
              .get(`${url}?keywords=${that.query}`)
              .then(function (response) {
                that.songs = response.data.result.songs;
              })
              .catch(function (err) {
                console.log(err);
              });
          },
          playMusic: function (musicId) {
            var that = this;
            // 获取歌曲播放URL
            axios
              .get(`https://autumnfish.cn/song/url?id=${musicId}`)
              .then(function (response) {
                // console.log(response.data.data[0].url);
                that.musicSrc = response.data.data[0].url;
              })
              .catch(function (err) {
                alert(err);
              });
            // 获取歌曲详情
            axios
              .get(`https://autumnfish.cn/song/detail?ids=${musicId}`)
              .then((response) => {
                that.musicCover = response.data.songs[0].al.picUrl;
              })
              .catch((error) => console.log(err));

            // 获取歌曲热评
            axios
              .get(`https://autumnfish.cn/comment/hot?type=0&id=${musicId}`)
              .then((response) => {
                // console.log(response);
                that.comments = response.data.hotComments;
              })
              .catch((error) => console.log(err));
          },
          playMv: function (mvId) {
            var that = this;
            axios
              .get("https:autumnfish.cn/mv/url?id=" + mvId)
              .then(function (response) {
                that.isShowing = true;
                that.mvUrl = response.data.data.url;
              })
              .catch(function (error) {
                console.log(error);
              });
          },
          play: function () {
            this.isPlaying = true;
          },
          pause: function () {
            this.isPlaying = false;
          },
        },
      });
    </script>
  </body>
</html>
